<template>
  <div>
    <div class="pad-t-23 pad-l-20 pad-b-22 subject bgc-white">
      <span class="font-16 font-color-3">售后服务申请详情</span>
    </div>
    <div>
      <aftersales-process :detail="detail" />
    </div>
    <div>
      <list-info :goodsList="detail.goodsList" />
    </div>
  </div>
</template>

<script lang="ts">
import AftersalesProcess from './components/AftersalesProcess/index.vue'
import ListInfo from './components/ListInfo/index.vue'
import { defineComponent, ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { getAfterSaleDetail } from '@/api/order/aftersale'

export default defineComponent({
  components: {
    AftersalesProcess,
    ListInfo
  },
  setup() {
    const router = useRouter()
    const afterSaleId = router.currentRoute.value.query.afterSaleId
    // const afterSaleId = '1273815974934646786'
    const detail = ref({})
    
    onMounted(() => {
      
    })
    
    const initAfterSaleDetail = () => {
      getAfterSaleDetail(afterSaleId).then(response => {
        if (response.isError) return
        detail.value = response.data
      })
    }
    initAfterSaleDetail()
    
    return {
      detail
    }
  }
})
</script>

<style lang="scss" scoped>
.subject {
  padding: 17px 19px;
  border-bottom: 1px solid #F5F5F5;
}
</style>
